no message

1 files changed, 51 insertions, 27 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index bcfb12ba..281f2bc2 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -138,6 +138,23 @@ export default function ProductDetail({ product }) {
     return true;
   }
 
+  const checkoutProduct = () => {
+    if (!auth) {
+      toast.error('Login terlebih dahulu untuk melanjutkan', { duration: 2000 });
+      router.push('/login');
+      return;
+    }
+    if (product.variant_total > 1 && !selectedVariant) {
+      toast.error('Pilih varian terlebih dahulu untuk melanjutkan pembelian', { duration: 2000 });
+      return;
+    }
+    if (quantity < 0) {
+      toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 });
+      return;
+    }
+    router.push(`/shop/checkout?product_id=${activeVariant.id}&qty=${quantity}`);
+  }
+
   return (
     <>
       <Header title={`${product.name} - Indoteknik`}/>
@@ -187,36 +204,38 @@ export default function ProductDetail({ product }) {
         <LineDivider />
 
         <div className="p-4">
-          <div className="flex gap-x-2">
-            <div className="w-9/12">
-              <label className="form-label mb-1">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label>
-              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
-                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
-                {product.variants.length > 1 ? (
-                  product.variants.map((variant) => {
-                    return (
-                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
-                    );
-                  })
-                ) : (
-                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
-                )}
-              </select>
-            </div>
-            <div className="w-3/12">
-              <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
-              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={onChangeQuantity} />
-            </div>
+          <div className="">
+            <label className="form-label mb-2">Pilih: <span className="text-gray_r-11 font-normal">{product.variant_total} Varian</span></label>
+            <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
+              <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
+              {product.variants.length > 1 ? (
+                product.variants.map((variant) => {
+                  return (
+                    <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
+                  );
+                })
+              ) : (
+                <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
+              )}
+            </select>
           </div>
 
+          <label htmlFor="quantity" className="form-label mb-1 mt-3">Jumlah</label>
           <div className="flex gap-x-2 mt-2">
-            <button className="btn-light w-full">+ Quotation</button>
+              <input type="number" name="quantity" id="quantity" className="form-input h-full w-5/12 text-center" value={quantity} onChange={onChangeQuantity} />
+            
             <button 
               className="btn-yellow w-full" 
               onClick={addItemToCart} 
               disabled={(product.lowest_price.price == 0 ? true : false)}
             >
-              + Keranjang
+              Keranjang
+            </button>
+            <button 
+              onClick={checkoutProduct}
+              className="btn-solid-red w-full"
+            >
+              Beli
             </button>
           </div>
         </div>
@@ -230,7 +249,7 @@ export default function ProductDetail({ product }) {
             <p className="text-gray-800">{product.variant_total} Varian</p>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
-            <h3 className="text-gray-900">Nomor SKU</h3>
+            <h3 className="text-gray-900">No. SKU</h3>
             <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
@@ -239,9 +258,14 @@ export default function ProductDetail({ product }) {
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
             <h3 className="text-gray-900">Stok</h3>
-            <p className="text-gray-800" id="stock">
-              {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
-            </p>
+            <div className="flex gap-x-2" id="stock">
+              {activeVariant.stock > 0 ? (activeVariant.stock > 5 && (
+                <>
+                  <div className="badge-solid-red">Ready Stock</div>
+                  <div className="badge-gray">{activeVariant.stock > 5 ? '> 5' : '< 5'}</div>
+                </>
+              )) : '0'}
+            </div>
           </div>
           <div className="flex py-2 justify-between items-center gap-x-1">
             <h3 className="text-gray-900">Berat Barang</h3>
@@ -259,7 +283,7 @@ export default function ProductDetail({ product }) {
         <LineDivider />
 
         <div className="p-4">
-          <h2 className="font-bold mb-4">Produk Lainnya</h2>
+          <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2>
           <ProductSlider products={similarProducts}/>
         </div>